import type { VbenFormProps, VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { queryPage } from './api';
import { ref, computed } from 'vue';
import { z } from '#/adapter/form';
import { handleRangeTimes } from '#/utils/tools';
import { validationRules } from '#/utils/validationRules';

// 操作id
export const idKey = ref('reportId');
export const handleId = ref('');
export const companyList = ref<any[]>([]);

// 表格表单数据
export const formOptions: VbenFormProps = {
  schema: [
    {
      fieldName: 'reportTitle',
      label: '标题',
      component: 'Input',
      defaultValue: undefined,
      componentProps: {
        placeholder: '请输入标题',
        allowClear: true,
      },
    },
    {
      fieldName: 'searchNo',
      label: '查询码',
      component: 'Input',
      defaultValue: undefined,
      componentProps: {
        placeholder: '请输入查询码',
        allowClear: true,
      },
    },
    {
      fieldName: 'reportNo',
      label: '报告编码',
      component: 'Input',
      defaultValue: undefined,
      componentProps: {
        placeholder: '请输入报告编码',
        allowClear: true,
      },
    },
    {
      component: 'Select',
      fieldName: 'companyId',
      defaultValue: undefined,
      componentProps: {
        allowClear: true,
        options: computed(() => companyList.value),
        placeholder: '请选择机构',
      },
      label: '机构',
    },
    {
      component: 'Select',
      fieldName: 'state',
      defaultValue: undefined,
      componentProps: {
        placeholder: '请选择状态',
        allowClear: true,
        options: [
          { label: '正常', value: 1 },
          { label: '已销毁', value: 0 },
        ],
      },
      label: '状态',
    },
    {
      component: 'RangePicker',
      fieldName: 'RangeTimes',
      label: '时间范围',
      componentProps: {
        allowClear: true,
        format: 'YYYY/MM/DD',
      },
    },
  ],
  wrapperClass: 'grid-cols-5',
  showCollapseButton: false,
};

// 表格数据
export const gridOptions: VxeTableGridOptions = {
  showOverflow: false,
  columnConfig: {
    resizable: true,
  },
  scrollY: {
    enabled: true,
    gt: 0,
  },
  columns: [
    { title: '序号', type: 'seq', width: 60 },
    {
      title: '报告编号',
      field: 'reportNo',
      align: 'center',
      width: 160,
      sortable: true,
    },
    { title: '标题', field: 'reportTitle', align: 'center' },
    {
      title: '查询码',
      field: 'searchNo',
      align: 'center',
      width: 160,
      sortable: true,
    },
    {
      title: '机构名称',
      field: 'companyName',
      align: 'center',
      sortable: true,
    },
    { title: '联系人', field: 'linkMan', align: 'center', width: 160 },
    { title: '联系电话', field: 'linkTel', align: 'center', width: 160 },
    {
      title: '提交日期',
      field: 'reportDate',
      align: 'center',
      width: 200,
      sortable: true,
    },
    {
      title: '状态',
      field: 'state',
      width: 100,
      cellRender: {
        name: 'CellDict',
        props: {
          dictData: [
            { label: '正常', value: 1 },
            { label: '已销毁', value: 0 },
          ],
        },
      },
    },
    {
      slots: { default: 'action' },
      fixed: 'right',
      width: 160,
      title: '操作',
    },
  ],
  minHeight: '100%',
  maxHeight: '100%',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        formValues = handleRangeTimes(formValues);
        let params = {
          page: page.currentPage,
          limit: page.pageSize,
          handlerName: 'baseReportPageListHandler',
          ...formValues,
        };
        return await queryPage(params);
      },
    },
    response: {
      result: 'data.records',
      total: 'data.total',
      list: 'data.records',
    },
  },
  pagerConfig: {
    enabled: true,
    pageSize: 10,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    import: false,
    refresh: true,
    zoom: true,
  },
};

// 编辑弹窗表单配置
export const drawerFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    defaultValue: '',
    fieldName: idKey.value,
    label: 'id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  // {
  //   component: 'ApiSelect',
  //   // 对应组件的参数
  //   componentProps: {
  //     // 菜单接口
  //     api: getCompanyList,
  //     // 菜单接口转options格式
  //     labelField: 'companyName',
  //     valueField: 'companyId',
  //   },
  //   // 字段名
  //   fieldName: 'companyId',
  //   // 界面显示的label
  //   label: '机构名称',
  // },
  {
    component: 'input',
    fieldName: 'companyId',
    componentProps: {
      class: 'w-1/2',
    },
    label: '机构名称',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入报告标题',
      allowClear: true,
    },
    fieldName: 'reportTitle',
    label: '标题',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'searchNo',
    componentProps: {
      placeholder: '请输入查询码',
      class: 'w-1/2',
      allowClear: true,
    },
    label: '查询码',
  },
  {
    component: 'FileUpload',
    fieldName: 'fileObj',
    description: '请上传pdf格式的文件',
    componentProps: {
      accept: '.pdf,application/pdf',
      maxCount: 1,
    },
    label: '文件',
    rules: z.custom((data) => {
      return data && data.ossPath && data.status != 'removed';
    }, '请上传pdf格式的文件'),
  },
];

// 编辑弹窗表单配置
export const AddDrawerFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    defaultValue: '',
    fieldName: idKey.value,
    label: '机构id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入机构名称',
      allowClear: true,
    },
    fieldName: 'companyName',
    label: ' 机构名称',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入联系人',
      allowClear: true,
      class: 'w-1/3',
    },
    fieldName: 'linkMan',
    label: '联系人',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入联系人手机号',
      allowClear: true,
      class: 'w-1/3',
      maxLength: 11,
    },
    fieldName: 'linkTel',
    label: '联系人手机号',
    rules: z
      .string()
      .min(1, { message: validationRules.phone.tips })
      .regex(validationRules.phone.reg, validationRules.phone.tips),
  },
  // {
  //   fieldName: 'companyState',
  //   defaultValue: 1,
  //   label: '状态',
  //   component: 'Select',
  //   componentProps: {
  //     class: 'w-1/3',
  //     options: [
  //       { label: '显示', value: 1 },
  //       { label: '隐藏', value: 0 },
  //     ],
  //   },
  // },
];
